<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="h" uri="/syzg-html"%>
<%
	request.setAttribute("ctx", request.getContextPath());
%>
<!DOCTYPE html>
<html>
<body>
<div class="modal fade bs-example-modal-md" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-md" role="document" id="imgeView">
    <div class="modal-content" id="imgedetail">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">修改图片信息</h4>
      </div>
      <div class="modal-body" id="modalCore" >
	    <div class="modal-body-wrap" id="imgback" style="width:100%;height:360px;background-size:100% 100%;background-image: url(${ctx }${picdetail.path });">
	      <form class="form-horizontal mod-editGrid-form" role="form" id="aeForm" name="aeForm">
          <fieldset>
          <input type="hidden" id="id" name="id" value="${picdetail.id}"/>
          <input type="hidden" id="picsubjectId" value="${picdetail.picsubject.id}"/>
            <!-- generate code start -->

            <div class="form-group">
              <label class="col-sm-2 control-label" for="remark"><i class="fa fa-file-text-o"></i>图片描述</label>
              <div class="col-sm-10">
                <label id="l_remark">${picdetail.remark}</label>
                <input type="text" id="remark" name="remark" value="${picdetail.remark}" class="form-control" style="display: none;"/>
              </div>
            </div>
            
            <div class="form-group">
              <label class="col-sm-2 control-label" for="artist"><i class="fa fa-camera-retro"></i>摄影师</label>
              <div class="col-sm-10">
                <label id="l_artist">${picdetail.artist}</label>
                <input type="text" id="artist" name="artist" value="${picdetail.artist}" class="form-control" style="display: none;" />
              </div>
            </div>
            
            <div class="form-group">
              <label class="col-sm-2 control-label" for="shootingTime"><i class="fa fa-clock-o"></i>拍摄时间</label>
              <div class="col-sm-10">
                <label id="l_shootingTime"><fmt:formatDate pattern="yyyy-MM-dd" value="${picdetail.shootingTime}"/></label> 
                <input type="text" id="shootingTime" name="shootingTime" readonly="readonly" 
                value="<fmt:formatDate pattern="yyyy-MM-dd" value="${picdetail.shootingTime}"/>" class="form-control" style="display: none;"
                onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,startDate:'%y-%M-01',alwaysUseStartDate:true});" />
              </div>
            </div>

			<!-- generate code end -->
          </fieldset>
        </form>
	    </div>
      </div>
      <div class="modal-footer">
        <button id="btn_close" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button id="btn_edit" type="button" class="btn btn-primary" onclick="showInput();">修改</button>
        <button id="turnlarge" type="button" class="btn" onclick="turnLarge()">放大</button>
        <button id="turnMin" type="button" class="btn" onclick="turnMin()">缩小</button>
        <button id="btn_back" type="button" class="btn btn-default" onclick="showLabel();" style="display: none;">返回</button>
        <button id="btn_save" type="button" class="btn btn-primary" onclick="saveModify();" style="display: none;">保存</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
 	function turnLarge(){
 		var width = $("#imgeView").width();
 		var height = $("#imgback").height();
		if(width>799&&height>359){
			 $("#imgeView").width(800);
			 $("#imgback").height(560);
		}else{
			 $("#imgeView").width($("#imgeView").width() + 50);
			 $("#imgback").height($("#imgback").height() + 50);
		}
		 //$("#imgeView").height($("#imgeView").height() + 50);
		// $("#imgedetail").height($("#imgedetail").height() + 50);	 
	}
	 function turnMin(){
		var width = $("#imgeView").width();
	 	var height = $("#imgback").height();
		 if(width<601&&height<361){
			 $("#imgeView").width(600);
			 $("#imgback").height(360);
		 }else{
				$("#imgeView").width($("#imgeView").width() - 50);
				$("#imgback").height($("#imgback").height() - 50);
		 }
		/* if(s<600){
			$("#viewModal").height(600)
		}  */
		// $("#imgeView").height($("#imgeView").height() - 50);
		// $("#imgedetail").height($("#imgedetail").height() - 50);
	
	}
	

$(function(){
	/* $('#shootingTime').datetimepicker({
               	      format: 'yyyy-mm-dd',
               	  	  todayBtn:  'linked',
               	  	  language:  'zh-CN',
               	  	  startView: 2,
               	  	  minView: 2,
               	  	  pickerPosition:'top-right',
               	  	  autoclose: 1
               	  }); */
});

function showInput(){
	$("#remark").show();
	$("#l_remark").hide();
	$("#artist").show();
	$("#l_artist").hide();
	$("#shootingTime").show();
	$("#l_shootingTime").hide();
	$("#btn_close").hide();
	$("#btn_edit").hide();
	$("#btn_back").show();
	$("#btn_save").show();
}

function showLabel(){
	$("#remark").hide();
	$("#l_remark").show();
	$("#artist").hide();
	$("#l_artist").show();
	$("#shootingTime").hide();
	$("#l_shootingTime").show();
	$("#btn_close").show();
	$("#btn_edit").show();
	$("#btn_back").hide();
	$("#btn_save").hide();
}
function saveModify(){
	//$("#shootingTime").val($("#shootingTime").val());
	//var url = listUrl + "?picsubjectId=" + $("#picsubjectId").val();
	var shootingTime = $('#shootingTime').val();
	if(shootingTime == ''){
		alert("请选填拍摄时间");
	}
	/* $.post("${ctx}/path/picdetail/modPicdetail",$("#aeForm").serialize(),function(data){
		//var result = eval('(' + data + ')');
		if(data.success==true){
			alert("修改成功");
			showLabel();
			$("#l_remark").html(data.obj.remark);
			$("#l_artist").html(data.obj.artist);
			$("#l_shootingTime").html($("#shootingTime").val());
		} else {
			bootbox.alert("<h4>操作失败,原因：" + data.webInfo.errorList + "</h4>", function(){});
		}
	}); */
	var dataParams = {
			"picsubjectId":$('#picsubjectId').val(),
			"id":$('#id').val(),
			"remark":$('#remark').val(),
			"artist":$('#artist').val(),
			"shootingTime":shootingTime
		};
	$.ajax({
		url : "${ctx}/path/picdetail/modPicdetail",
		type : 'post',
		data : dataParams,
		success : function(data){
			if(data){
				bootbox.alert("<h4>修改成功</h4>", function(){});
				showLabel();
				$("#l_remark").html($('#remark').val());
				$("#l_artist").html($('#artist').val());
				$("#l_shootingTime").html($("#shootingTime").val());
			} else {
				bootbox.alert("<h4>操作失败</h4>", function(){});
			}
		},
		error:function(data){
			bootbox.alert("<h4>系统异常</h4>", function(){});  
		}
	});
}
</script>
</body>
</html>